<template>
  <div class="waybill-container">
    <!-- 头部form -->
    <div class="form-container">
      <el-form ref="searchForm" inline="true" label-width="90px" :model="searchForm" :label-position="right">
        <el-form-item prop="id" label="运单编号：" class="item">
          <el-input v-model="searchForm.id" placeholder="请输入运单编号" style="width:200px" />
        </el-form-item>
        <el-form-item prop="orderId" label="订单编号：" class="item">
          <el-input v-model="searchForm.orderId" placeholder="请输入订单编号" style="width:200px" />
        </el-form-item>
        <el-form-item prop="schedulingStatus" label="调度状态：" class="item">
          <el-select v-model="searchForm.schedulingStatus" placeholder="请选择">
            <el-option label="待调度" value="1" />
            <el-option label="未匹配线路" value="2" />
            <el-option label="已调度" value="3" />
          </el-select>
        </el-form-item>
        <el-form-item label="起始地机构：" class="item">
          <el-cascader
            v-model="searchForm.startAgencyId"
            placeholder="请选择起始地机构"
            :options="institutionList"
            prop="startAgencyId"
            :props="institutionProps"
            :show-all-levels="false"
            filterable
            clearable
            :emit-path="false"
            @expand-change="getCheckedNodes"
            @change="changeValue"
          />
        </el-form-item>
        <el-form-item prop="endAgencyId" label="目的地机构：" class="item">
          <el-cascader
            placeholder="请选择目的地机构"
            :options="institutionList"
            prop="endAgencyId"
            :props="institutionProps"
            :show-all-levels="false"
            filterable
            clearable
            :emit-path="false"
            @expand-change="getCheckedNodes"
            @change="changeValue"
          />
        </el-form-item>
        <el-form-item prop="currentAgencyId" label="当前所在机构：" class="item">
          <el-cascader
            placeholder="当前所在机构"
            :options="institutionList"
            prop="currentAgencyId"
            :props="institutionProps"
            :show-all-levels="false"
            filterable
            clearable
            :emit-path="false"
          />
        </el-form-item>
        <el-form-item style="padding-left:30px">
          <el-button type="primary" @click="submitForm('searchForm')">搜索</el-button>
          <el-button @click="resetForm('searchForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 中间 -->
    <div class="tab-container">
      <el-card>
        <el-tab-pane label="全部">全部6</el-tab-pane>
        <el-tab-pane label="新建">新建0</el-tab-pane>
        <el-tab-pane label="已装车">已装车0</el-tab-pane>
        <el-tab-pane label="运输中">运输中0</el-tab-pane>
        <el-tab-pane label="到达终端网点">到达终端网点5</el-tab-pane>
        <el-tab-pane label="拒收">拒收1</el-tab-pane>
      </el-card>
    </div>
    <!-- 底部table -->
    <div class="table-container">
      <el-table
        stripe
        :data="waybillData"
        style="width: 100%"
        :render-header="labelHead"
        :header-cell-style="{background: '#f8faff'}"
      >
        <el-table-column
          type="index"
          label="序号"
          width="60px"
        />
        <el-table-column
          prop="id"
          label="运单编号"
          width="160px"
        />
        <el-table-column
          prop="orderId"
          label="订单编号"
          width="160px"
        />
        <el-table-column
          prop="status"
          label="运单状态"
          width="130px"
        >
          <template v-slot="{row}">
            <span v-if="row.status===1">新建</span>
            <span v-if="row.status===2">已装车</span>
            <span v-if="row.status===3">到达</span>
            <span v-if="row.status===4">到达终端网点</span>
            <span v-if="row.status===6">拒收</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="schedulingStatus"
          label="调度状态"
          width="100px"
        >
          <template v-slot="{row}">
            <span v-if="row.schedulingStatus===1">待调度</span>
            <span v-if="row.schedulingStatus===2">未匹配线路</span>
            <span v-if="row.schedulingStatus===3">已调度</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="startAgencyName"
          label="起始营业部"
          width="170px"
        />
        <el-table-column
          prop="endAgencyName"
          label="终点营业部"
          width="170px"
        />
        <el-table-column
          prop="currentAgencyName"
          label="当前所在机构"
          width="170px"
        />
        <el-table-column
          prop="nextAgencyName"
          label="下一个机构"
          width="170px"
        />
        <el-table-column
          prop="totalVolume"
          label="货品总体积(立方米)"
          width="170px"
        />
        <el-table-column
          prop="totalWeight"
          label="货品总重量(千克)"
          width="170px"
        />
        <el-table-column
          prop="created"
          label="创建时间"
          width="170px"
        />
        <el-table-column
          prop="updated"
          label="更新时间"
          width="170px"
        />
        <el-table-column
          fixed="right"
          label="操作"
          width="85px"
        >
          <template v-slot="{row}">
            <el-button type="text" size="small" @click="$router.push(`/waybill/detail/${row.id}`)">查看详情</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import { getWaybillList } from '@/api/orderManagement'
import { getInstitutionDetail, getInstitutionList } from '@/api/institution'
export default {
  name: 'Waybill',
  data() {
    return {
      // 树状机构数据
      institutionList: {
        id: '', // id
        name: '' // 名称
      },
      // 树状结构默认属性
      institutionProps: {
        label: 'name',
        children: 'children',
        value: 'id'
      },
      // 运单列表请求参数
      waybillParams: {
        id: '', // id
        orderId: '', // 订单id
        page: 1, // 页码
        pageSize: 10 // 页尺寸
        // status: '' // 运单状态(1.新建 2.已装车，发往x转运中心 3.到达 4.到达终端网点 5.已签收 6.拒收))
      },
      waybillData: [], // 运单列表数据
      searchForm: {
        id: '', // 运单编号
        orderId: '', // 订单编号
        schedulingStatus: null, // 调度状态(1.待调度2.未匹配线路3.已调度),
        startAgencyId: null, // 起始网点id
        endAgencyId: null, // 终点网点id
        currentAgencyId: null, // 当前所在机构id
        page: 1, // 页码
        pageSize: 10 // 页尺寸
      }
    }
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val)
    }
  },

  created() {
    this.getWaybillList()
    this.getInstitutionList()
  },
  methods: {
    // 获取运单列表数据
    async getWaybillList() {
      const result = await getWaybillList(this.searchForm)
      // console.log(result.data.data)
      this.waybillData = result.data.data.items
    },
    // 点击搜索运单
    async submitForm() {
      await getWaybillList(this.searchForm)
    },
    // 重置表单
    resetForm() {
      this.$refs.searchForm.resetFields()
    },
    // 获取运输机构
    async getInstitutionList() {
      const result = await getInstitutionList()
      // console.log(result)

      this.institutionList = JSON.parse(result.data.data)
      // 设置默认选中
      // const currentId = this.institutionList[0].children[0].children[0].id
      // this.$refs.tree.setCurrentKey(currentId)
    },
    // 获取机构详情
    async getInstitutionDetail(id) {
      const result = await getInstitutionDetail(id)
      // 赋值
      // this.institutionFormData = result.data.data
      this.institutionList = {
        id: result.data.data.id,
        name: result.data.data.name,
        type: result.data.data.type,
        province: result.data.data.province.id,
        city: result.data.data.city.id,
        county: result.data.data.county.id,
        address: result.data.data.address,
        longitude: result.data.data.longitude,
        latitude: result.data.data.latitude,
        managerName: result.data.data.managerName,
        phone: result.data.data.phone
      }
    },
    // 点击获取机构id
    async nodeClick(data) {
      await this.getInstitutionDetail(data.id)
    },
    filterNode(value, data) {
      if (!value) return true
      return data.label.indexOf(value) !== -1
    }
  }
}
</script>

<style lang="scss" scoped>
  .waybill-container {
    background: rgb(243, 245, 249);

    .form-container {
      background: #fff;
      padding: 20px;
      margin-bottom: 16px;

      .item {
        padding-left: 30px;
        padding-right: 30px;
        margin-bottom: 20px;

        ::v-deep .el-form-item__label {
          color: #20232a;
          text-align: right;
          white-space: nowrap;
          padding: 0 12px 0 0;
          vertical-align: middle;
        }
      }
    }

    .table-container {
      margin-top: 16px;
      background: #fff;
      padding: 28px;

      .el-table {
        border: 1px solid #EBEEF5;

      }

    }
  }
</style>
